/**
 * webpack配置
 */


const path = require('path') // path模块
const HtmlWebpackPlugin = require("html-webpack-plugin") // 引入打包html的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 提取css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 压缩css
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin') // 删除dist

module.exports = {
  target: "web",

  // 1. 入口
  // entry: "./src/js/home.js",
  entry: {
    weui: "./src/lib/weui/weui.js", //weui
    captcha: "./src/lib/captcha/captcha-mini.js", // 验证码
    swiper: "./src/lib/swiper/swiper-bundle.js", // swiper轮播插件
    commonCss: "./src/js/common/commonCss.js", // 公共的css

    // 很多地方要用到的公用的js
    dom: "./src/js/common/dom.js", // dom.js
    http: "./src/js/common/http.js", // http.js
    utils: "./src/js/common/utils.js", // utils.js


    /* 每个页面自己的js */
    advertisement: "./src/js/advertisement.js", // 广告
    home: "./src/js/home.js", // 首页
    login: "./src/js/login.js", // 登录
    register: "./src/js/register.js", // 注册
    mine: "./src/js/mine.js", //个人中心页面
    edit: "./src/js/edit.js", //个人资料
    run: "./src/js/run.js", //跑步页面
    ride: "./src/js/ride.js", //骑行页面
    course: "./src/js/course.js", //课程页面
    courseDetail: "./src/js/courseDetail.js", //课程详情页面
    player: "./src/js/player.js", //播放器页面
    sportData: "./src/js/sportData.js", //运动数据页面
    badge: "./src/js/badge.js", //徽章页面
  },

  // 2. 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "js/[name]-[hash:10].js",
    publicPath: './',
  },

  // 3. module
  module: {
    //规则
    rules: [
      // css
      {
        test: /\.css$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          "css-loader",
          "postcss-loader"
        ],
      },
      // less
      {
        test: /\.less$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          "css-loader",
          "postcss-loader", "less-loader"
        ]
      },
      //css背景图片打包
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader',
        options: {
          name: '[hash].[ext]',
          limit: 10 * 1024,
          esModule: false,
          outputPath: 'img', // 打包后输出目录
        }
      },
      //HTML引入图片打包
      {
        test: /\.html$/,
        use: ['html-loader'],
      },
      //字体图标
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'fonts' // 输出到这个文件夹中
        }
      },
      // js
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      }
    ]
  },

  // 4. 插件
  plugins: [
    //徽章
    new HtmlWebpackPlugin({
      template: "./src/page/badge.html", // 你要以哪个html为模板 进行打包
      filename: 'badge.html',
      chunks: ['badge', 'commonCss', 'dom', 'http', 'utils'], // 自己需要哪些模块
    }),
    //运动数据
    new HtmlWebpackPlugin({
      template: "./src/page/sportData.html", // 你要以哪个html为模板 进行打包
      filename: 'sportData.html',
      chunks: ['sportData', 'commonCss', 'dom', 'http', 'utils'], // 自己需要哪些模块
    }),
    //播放器
    new HtmlWebpackPlugin({
      template: "./src/page/player.html", // 你要以哪个html为模板 进行打包
      filename: 'player.html',
      chunks: ['player', 'commonCss', 'dom', 'http', 'utils'], // 自己需要哪些模块
    }),
    //课程详情
    new HtmlWebpackPlugin({
      template: "./src/page/courseDetail.html", // 你要以哪个html为模板 进行打包
      filename: 'courseDetail.html',
      chunks: ['courseDetail', 'commonCss', 'dom', 'http', 'utils'], // 自己需要哪些模块
    }),
    //课程
    new HtmlWebpackPlugin({
      template: "./src/page/course.html", // 你要以哪个html为模板 进行打包
      filename: 'course.html',
      chunks: ['course', 'commonCss', 'dom', 'http', 'utils'], // 自己需要哪些模块
    }),
    //跑步
    new HtmlWebpackPlugin({
      template: "./src/page/run.html", // 你要以哪个html为模板 进行打包
      filename: 'run.html',
      chunks: ['run', 'commonCss', 'dom', 'http', 'utils'], // 自己需要哪些模块
    }),
    //骑行
    new HtmlWebpackPlugin({
      template: "./src/page/ride.html", // 你要以哪个html为模板 进行打包
      filename: 'ride.html',
      chunks: ['ride', 'commonCss', 'dom', 'http', 'utils'], // 自己需要哪些模块
    }),
    //个人资料
    new HtmlWebpackPlugin({
      template: "./src/page/edit.html", // 你要以哪个html为模板 进行打包
      filename: 'edit.html',
      chunks: ['edit', 'commonCss', 'dom', 'http', 'utils', 'weui'], // 自己需要哪些模块
    }),
    //个人中心
    new HtmlWebpackPlugin({
      template: "./src/page/mine.html", // 你要以哪个html为模板 进行打包
      filename: 'mine.html',
      chunks: ['mine', 'commonCss', 'dom', 'http', 'utils'], // 自己需要哪些模块
    }),
    // 广告页
    new HtmlWebpackPlugin({
      template: "./src/page/advertisement.html", // 你要以哪个html为模板 进行打包
      filename: 'advertisement.html',
      chunks: ['advertisement', 'commonCss', 'dom'], // 自己需要哪些模块
    }),

    // 注册页面
    new HtmlWebpackPlugin({
      template: "./src/page/register.html", // 你要以哪个html为模板 进行打包
      filename: 'register.html',
      chunks: ['register', 'commonCss', 'http', 'dom', 'utils', 'captcha'], // 自己需要哪些模块
    }),

    // 登录页面
    new HtmlWebpackPlugin({
      template: "./src/page/login.html", // 你要以哪个html为模板 进行打包
      filename: 'login.html',
      chunks: ['login', 'commonCss', 'dom', 'http', 'utils'], // 自己需要哪些模块
    }),

    // 使用插件 这个插件是把 html 打包到 dist 里面
    new HtmlWebpackPlugin({
      template: "./src/page/home.html", // 你要以哪个html为模板 进行打包
      filename: 'home.html',
      chunks: ['home', 'commonCss', 'http', 'dom', 'utils', 'swiper'], // 自己需要哪些模块
    }),

    // 提取css
    new MiniCssExtractPlugin({
      filename: "css/[name]-[hash].css",
    }),

    // 压缩css
    new OptimizeCssAssetsWebpackPlugin(),

    // 删除dist
    new CleanWebpackPlugin()
  ],

  // 5. 模式
  mode: "development",

  // 6. 启动开发服务器
  // 开发服务器
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
    compress: true, // 启动gzip压缩
    port: 8088, // 端口
    open: true, // 自动打开服务
    openPage: 'advertisement.html', // 指定打开服务器访问的页面
  }

}